import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Table, Col, Row, DatePicker, Select} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";

const {Column, ColumnGroup} = Table;
const {Option} = Select;


class QinShiStatus extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  directionDict = {
    "0-90": '90',
    "90-180": '180',
    "180-270": '270',
    "270-360": '360'
  }

  state = {
    selectedTime: currentTime(),
    qinshiResult: {},
    direction: "90",
    option: {
      color: ['#5470C6', '#EE6666', '#675bba'],
      grid: {
        top: '2%',
        left: '15%',
        right: '12%',
        bottom: '20%',
      },
      legend: {
        bottom: 10
        // show:false
        // data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        name: '周向',
        min: 0,
        max: 7000
      },
      yAxis: {
        name: '高度',
        min: 4000,
        max: 12000
      },

      series: [{
        name:"炉缸侧壁侵蚀边界",
        color:"#ee822f",
        symbol: "none",
        type: 'line',
        data: []
      },
        {
          name: "炉底侵蚀边界",
          symbol: "none",
          color:"red",
          type: 'line',
          data: []
        }, {
          name:"炉缸设计尺寸",
          symbol: "none",
          color:"blue",
          type: 'line',
          data: [[0, 11700], [1460, 11700], [1460, 10200], [1810, 9200], [1980, 8700], [2270, 8200], [2690, 8050], [2670, 8000], [4810, 8000], [6650, 8000], [6650, 4000]]
        }]
    }
  };


  async componentDidMount() {
    const payload = await getMockTime("LuGangQinShiResult")
    const {current} = payload
    const {dispatch} = this.props;
    dispatch({
      type: 'lugang/getQinshiResult',
      payload: {
        time: dateFormat(current)
      }
    });

    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(document.getElementById("qinShiStatus"));
    // 绘制图表
    chart.setOption(this.state.option);
    addResizeHook(this, chart.resize)

    this.setState({chart,selectedTime:current})
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {qinshiResult,} = nextProps;
    const {option, chart} = prevState;

    // 当传入的type发生变化的时候，更新state
    if (chart && qinshiResult && qinshiResult !== prevState.qinshiResult) {
      const {group1, group2} = qinshiResult
      option.series[0].data = group1;
      option.series[1].data = group2;
      chart.setOption(option, true)
      return {qinshiResult}
    }

    return null;
  }

  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  timePick = value => {
    this.state.selectedTime = value.toDate();
    this.getData()
  };

  getData = () => {
    this.props.dispatch({
      type: 'lugang/getQinshiResult',
      payload: {
        time: dateFormat(this.state.selectedTime),
        direction: this.state.direction
      }
    })
  }

  render() {
    const {width = 100, height = 350} = this.props;
    const {selectedTime, qinshiResult} = this.state
    const {table} = qinshiResult
    return (
      <div>

        {/*<RangePicker*/}
        {/*  key={Math.random()} //强制刷新组件*/}
        {/*  style={{width: 400}}*/}
        {/*  showTime={{format: 'HH'}}*/}
        {/*  format={dateFormat}*/}
        {/*  placeholder={['开始时间', '结束时间']}*/}
        {/*  onOk={this.timePick}*/}
        {/*  defaultValue={[moment(displayStartTime, dateFormat), moment(displayEndTime, dateFormat)]}*/}
        {/*/>*/}
        <DatePicker
          showTime
          format="YYYY-MM-DD HH"
          placeholder="选择时间"
          defaultValue={moment(selectedTime, "YYYY-MM-DD HH")}
          key={Math.random()}
          onOk={this.timePick}
          style={{marginBottom: 8}}
        />
        <Select defaultValue={this.state.direction} placeholder="请选择" style={{width: 80, marginLeft: 10}}
                onSelect={direction => {
                  this.setState({direction})
                  this.getData();
                }}
        >
          {
            Object.entries(this.directionDict).map(([k, v]) => <Option value={v}>{k}</Option>)
          }
        </Select>
        <Row>
          <Col span={13}>
            <div id="qinShiStatus" style={{width: `${width}%`, height}}/>
          </Col>
          <Col span={11}>
            <Table size={"small"} pagination={false} dataSource={table}>
              <Column title="炉缸" colSpan={2} dataIndex="lugang" key="lugang"/>
              <Column title="" colSpan={0} dataIndex="v1" key="v1"/>
              <Column title="炉底" colSpan={2} dataIndex="ludi" key="ludi"/>
              <Column title="" colSpan={0} dataIndex="v2" key="v2"/>
            </Table>

          </Col>
        </Row>
      </div>

    )
  }
}

export default connect(({lugang, global}) => ({
  qinshiResult: lugang.qinshiResult,
  global
}))
(QinShiStatus);
